<template lang="">
  <div class="center">
    <div class="main" style="border: 1px solid #fff;height: 1600px;background-color: #fff;border-radius: 10px;">
      <div class="top" style="border: 0px solid #000;background-color: #fff;border-radius: 10px;margin: 30px 50px;">
        <div class="title"
          style="text-align: left;margin-top:30px;border-left: 3px solid #fe0100;width: 100px;height: 25px;">
          <h3 style="color:#fe0100 ;font-weight: 500;font-size: 18px;padding-left: 15px;">员工详情</h3>
        </div>

        <div v-if="type === 1" class="bx" style="border: 0px solid #000;width: 550px;margin: 40px 20px;">
          <el-form ref="userData" :model="userData" label-width="130px">
            <el-form-item label="员工姓名">
              <el-input v-model="userData.realname"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="userData.username" placeholder="请输入邮箱"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="userData.sex">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="userData.age"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="学历">
              <el-input v-model="userData.education"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="毕业院校">
              <el-input v-model="userData.college"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="专业">
              <el-input v-model="userData.industry"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="userData.phone"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="入职时间">
              <el-input v-model="userData.hiredate" placeholder="yyyy-MM-dd"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="转正时间">
              <el-input v-model="userData.positiveTime" placeholder="yyyy-MM-dd"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item v-if="userData.staffStatus=='离职'" label="离职时间">
              <el-input v-model="userData.departureTime" placeholder="yyyy-MM-dd"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item v-if="userData.staffStatus=='在职'">
            </el-form-item>
            <el-form-item label="生日">
              <el-input v-model="userData.birthday" placeholder="MM-dd"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="身份证号码">
              <el-input v-model="userData.identityCard"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="部门">
              <el-select v-model="userData.department" placeholder="请选择" clearable
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
                <el-option v-for="(item,index) in dictList" :key="index" :label="item.dictValue"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职位">
              <el-input v-model="userData.position"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="紧急联系人">
              <el-input v-model="userData.emergencyContact" placeholder="姓名：电话号码"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-radio-group v-model="userData.staffStatus">
                <el-radio label="在职"></el-radio>
                <el-radio label="离职"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="薪资">
              <el-input v-model="userData.salary" type="number"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="userData.adress"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userData.password"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="其他信息">
              <el-input v-model="userData.information"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="权限">
              <el-checkbox-group v-model="userData.userAuth" style="width: 900px;text-align:left;">
                <el-checkbox label="b">员工管理</el-checkbox>
                <el-checkbox label="a">报销审批</el-checkbox>
                <el-checkbox label="d">合同管理</el-checkbox>
                <el-checkbox label="c">客户管理</el-checkbox>
                <el-checkbox label="e">销售员</el-checkbox>
                <el-checkbox label="f">销售管理</el-checkbox>
                <el-checkbox label="g">报销主管</el-checkbox>
                <el-checkbox label="h">财务主管</el-checkbox>
                <el-checkbox label="i">系统管理</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-button @click="updateCustom()" type="danger" class="button">确定</el-button>
              <el-button @click="type = 0" type="danger" class="button">取消</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div v-else class="bx" style="border: 0px solid #000;width: 550px;margin: 40px 20px;">
          <ul style="list-style: none;padding: 0;margin:0;">
            <li v-model="userData" style="text-align: left;margin-left: 15px">
              <p>
                <span class="title">员工姓名 </span>
                <span class="blue">{{userData.realname}}</span>
              </p>
              <p>
                <span class="title">员工邮箱 </span>
                <span class="blue">{{userData.username}}</span>
              </p>
              <p>
                <span class="title" style="margin-left: 30px;">性别 </span>
                <span class="blue">{{userData.sex}}</span>
              </p>
              <p>
                <span class="title" style="margin-left: 30px;">年龄 </span>
                <span class="blue">{{userData.age}}</span>
              </p>
              <p>
                <span class="title" style="margin-left: 30px;">学历 </span>
                <span class="blue">{{userData.education}}</span>
              </p>
              <p>
                <span class="title">毕业院校 </span>
                <span class="blue">{{userData.college}}</span>
              </p>
              <p>
                <span class="title" style="margin-left: 30px;">专业 </span>
                <span class="blue">{{userData.industry}}</span>
              </p>
              <p>
                <span class="title" style="margin-left: 30px;">部门 </span>
                <span>{{userData.department}}</span>
              </p>
              <p>
                <span class="title" style="margin-left: 30px;">职位 </span>
                <span>{{userData.position}}</span>
              </p>
              <p>
                <span class="title">入职时间 </span>
                <span>{{userData.hiredate}}</span>
              </p>
              <p>
                <span class="title">转正时间 </span>
                <span>{{userData.positiveTime}}</span>
              </p>
              <p v-if="userData.staffStatus=='离职'">
                <span class="title">离职时间 </span>
                <span>{{userData.departureTime}}</span>
              </p>
              <p v-if="userData.staffStatus=='在职'">
              </p>
              <p>
                <span class="title" style="margin-left: -17px;">身份证号码 </span>
                <span>{{userData.identityCard}}</span>
              </p>
              <p>
                <span class="title" style="margin-left: 30px;">生日 </span>
                <span>{{userData.birthday}}</span>
              </p>
              <p>
                <span class="title">联系电话 </span>
                <span>{{userData.phone}}</span>
              </p>
              <p>
                <span class="title">紧急联系 </span>
                <span>{{userData.emergencyContact}}</span>
              </p>
              <p>
                <span class="title" style="margin-left: 30px;">状态 </span>
                <span>{{userData.staffStatus}}</span>
              </p>
              <p>
                <span class="title" style="margin-left: 30px;">薪资 </span>
                <span>{{userData.salary}}</span>
              </p>
              <p>
                <span class="title" style="margin-left: 30px;">地址</span>
                <span>{{userData.adress}}</span>
              </p>
              <p>
                <span class="title">其他信息</span>
                <span>{{userData.information}}</span>
              </p>
              <p>
                <span class="title" style="margin-left: 30px;">权限</span>
                <span>
                  <el-checkbox-group v-model="userData.userAuth"
                    style="width: 900px;text-align:left;position: relative;left: 90px;top: -20px"
                    onclick="return false">
                    <el-checkbox label="b">员工管理</el-checkbox>
                    <el-checkbox label="a">报销审批</el-checkbox>
                    <el-checkbox label="d">合同管理</el-checkbox>
                    <el-checkbox label="c">客户管理</el-checkbox>
                    <el-checkbox label="e">销售员</el-checkbox>
                    <el-checkbox label="f">销售管理</el-checkbox>
                    <el-checkbox label="g">报销主管</el-checkbox>
                    <el-checkbox label="h">财务主管</el-checkbox>
                    <el-checkbox label="i">系统管理</el-checkbox>
                  </el-checkbox-group>
                </span>
              </p>

            </li>
          </ul>
          <el-button @click="type = 1" type="danger" class="button">编辑</el-button>
          <el-button @click="goBack()" type="danger" class="button">返回</el-button>
          <div class="list2" style="width: 800px;height: auto;background-color: #fff;">
            <p style="text-align: left;margin-top:30px;border-left: 3px solid #fe0100;width: 900px;height: 25px;">
              <span class="title"
                style="color:#fe0100 ;font-weight: 500;font-size: 18px;padding-left: 15px;">文件列表</span><br>
            <ul>
              <li v-for="item in fileList" :key="item.fileId" style="line-height: 30px;border: 0px solid #000;">
                <div class="title" style="float: left;"><i class="el-icon-document"
                    style="margin-right: 5px;"></i>{{item.filename}}
                  <span v-if="item.fileStatus==0" style="position: absolute;left: 1000px;">未上传</span>
                  <span v-if="item.fileStatus==1" style="position: absolute;left: 1000px;">已上传</span>
                  <span v-if="item.fileStatus==2" style="position: absolute;left: 1000px;">已删除</span>
                  <span>{{item.updateTime}}</span>
                </div>
                <div class="cz" style="float: right;cursor: pointer;border: 0px solid #000;">
                  <i v-if="item.fileStatus=='1'" class="el-icon-download"
                    @click="outputFile(item.fileRecordId,item.fileUrl)" style="color: #0060ff;"></i>
                </div>
                <div class="up" style="position: absolute;left:1170px;">
                  <el-upload class="upload-demo" action="http://192.168.2.75:9050/api/file/upload"
                    :on-preview="uploadVideoProcess" multiple :on-success="handleVideoSuccess" :headers='importHeaders'
                    :file-list="fileList" :show-file-list="false">
                    <i class=" el-icon-upload2" style="color:rgb(255, 136, 0);" @click="curRowIndex(item)"></i>
                  </el-upload>
                </div>

              </li>
            </ul>
            </p>
          </div>
        </div>


      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        current: 1,
        size: 7,
        total: 0,
        userAuth:[],
        userData: {},
        dictList: [],
        type: 0,
        userId: this.$route.query.userId,
        userType: '1',
        dialogVisible: false,
        dialogVisible1: false,

        fileList: [],
        fileData: {
          fileUrl: '',
          // createTime: '',
          // relatedId: this.$route.query.userId,
          filename: '',
          // fileType: '',
          fileStatus: "1",
          // storageType:'',
          // fileFormat:'',
          // remark:''
        },
      }
    },
    mounted() {

      this.getUserDetail()
      this.getDictList()
      this.importHeaders = {
        token: sessionStorage.getItem('token'),

      };
    },
    methods: {
      handleCurrentChange(val) {
        this.current = val
        this.getUserLinkman()
      },
      goBack() {
        this.$router.push({
          path: '/staff'
        });
      },
      curRowIndex(row) {
        console.log(row)
        this.fileData = row;
      },
      //上传附件
      handleVideoSuccess(res, file) { //获取上传图片地址
        this.fileFlag = false;
        this.fileUploadPercent = 0;
        // console.log(res)
        console.log(file)
        if (res.code == 200) {
          this.$message.success('文件上传成功！');
          this.updateFile(file.name, file.response.data)
        } else {
          this.$message.error('文件上传失败，请重新上传！');
        }
      },
      uploadVideoProcess(event, file, fileList) {
        this.fileFlag = true;
        this.fileUploadPercent = Math.floor(file.percentage.toFixed(0));
      },
      // 修改文件
      updateFile(filename, fileurl) {
        this.fileData.filename = filename
        this.fileData.fileUrl = fileurl
        this.fileData.fileStatus = "1"
        var data = this.fileData
        this.$API.file.reqUpdateFileRecord(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("修改成功！");
            this.dialogVisible1 = false;
            this.getFileList()
          } else {
            this.$message.error("修改失败！");
          }
        })
      },

      getFileList() {
        var data = {
          current: 1,
          size: 100,
          relatedId: this.userId,
          // fileType: this.fileType,
          sort: "filename",
        }
        this.$API.file.reqFileRecordList(data).then(res => {
          if (res.data.code == 200) {

            if (res.data.data.length != 0) {
              this.fileList = res.data.data
            } else {
              this.fileList = []
            }
          } else {
            this.$message.error("查询失败！");
          }
        })
      },

      //  下载附件
      outputFile(a, b) {
        console.log("---------------------")
        console.log(process.env.VUE_APP_SERVER_HOST + b);
        let link = document.createElement("a");
        link.target = "_blank"
        link.href = process.env.VUE_APP_SERVER_HOST + b;
        link.setAttribute("download", "");
        link.click();
      },
      // 编辑员工信息
      updateCustom() {
        if (this.username == '') {
          this.$message("员工名称不能为空")
        } else {
          this.userData.userAuth = this.userData.userAuth.toString()
          var data = this.userData
          // 获取资源列表接口
          this.$API.user.updateStaffy(data).then(res => {
            if (res.data.code == 200) {
              this.$message.success("修改成功！");
              this.type = 0
            } else {
              this.$message.error("修改失败！");
            }
          })
        }
      },
      //查询部门
      getDictList() {
        var data = {
          // contractId: this.contractId,
          current: this.current,
          size: this.size,
          // dictKey:this.dictKey
        }
        this.$API.user.reqDictList(data).then(res => {
          if (res.data.code == 200) {
            this.dictList = res.data.data
          } else {
            this.$message.error("查询失败！");
          }
        })
      },
      // 获取员工信息
      getUserDetail() {
        var data = {
          current: 1,
          size: 1,
          userId: this.userId,
          userType: this.userType
        }
        this.$API.user.reqUserList(data).then(res => {
          if (res.data.code == 200) {
            if (res.data.data.length != 0) {
              if (res.data.data[0].userAuth == null) {
                res.data.data[0].userAuth = ""
              }else if(res.data.data[0].password != null){
                res.data.data[0].password = null
              }
              console.log( res.data.data[0])
              res.data.data[0].userAuth = res.data.data[0].userAuth.split(",")
              this.userData = res.data.data[0]        
              this.getFileList()
            } else {
              this.userData = []
            }
          } else {
            this.$message.error("查询失败！");
          }
        })
      },
    },
  }

</script>
<style scoped>
  @import "../../../style/style.css";

 

  .bx>>>.el-form-item__content {
    width: 300px !important;
    /* border: 1px solid #000; */
  }

  .bx>>>.el-form-item__label {
    font-size: 16px;
  }

  .bx>>>.el-textarea__inner {
    height: 150px;
  }

  .bx>>>.el-input__suffix {
    left: 150px;

  }

  .bx>>>.el-form-item {
    margin-bottom: 10px;
  }

  .bx ul li p .title {
    color: #888;
    margin-right: 20px;

  }

  .bx ul li p .blue {
    color: #fe0100;
    /* margin-right: 20px; */
  }

  .el-input,
  .el-select,
  .el-date-picker {
    border: 1px solid #b6b6b6;
    border-radius: 50px;
    overflow: hidden;
    width: 300px;
    position: relative;
    top: 0;
  }

  .add>>>.el-dialog {
    position: relative;
    margin: 0 auto 50px;
    border-radius: 30px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    box-sizing: border-box;
    width: 500px;
    overflow: hidden;
  }

  .add>>>.el-input__suffix {
    text-align: right;
  }

  .add>>>.el-select .el-input {
    width: 100%;
  }

  .add>>>.el-form-item__content {
    text-align: right;
    padding-right: 50px;
  }

  .add>>>.el-radio-group {
    margin-right: 100px;
    /* margin-top: 30px; */
  }

</style>